<template>
	<view class="bgView">
		<!-- <navBar class="navBarView" :style="[{top: StatusBar+'px'}]" :title="'员工培训通知'"></navBar> -->
		<view class="sonView" :style="[{top: StatusBar+5+'px'}]">
			<view style="display: flex;flex: 1;align-items: center;justify-content: center;" @click="backHandle">
				<u-icon name="arrow-left" color="#1F2023" size="28"></u-icon>
			</view>
			<view style="height: 20px;background-color: #E9E9E9;width: 1px;margin-top: 7px;"></view>
			<view style="display: flex;flex: 1;align-items: center;justify-content: center;" @click="homeHandle">
				<u-icon name="home-fill" color="#1F2023" size="28"></u-icon>
			</view>
		</view>
		<view class="topView">
			<view class="logoView">
				<image src="../../static/img/logo.png" class="logo" :style="[{marginTop:TopHeight + 'px'}]"></image>
				<view style="color: #7E7E7E;font-size: 14px;margin-top: 20px;">嘉生活欢迎您登录</view>
			</view>
			<view v-if="state=='2'">
				<view class="userNameView" style="margin-top: 80px;">
					<u--input
					    placeholder="请输入手机号码"
					    border="surround"
					    v-model="user.username"
					    @change="change"
					  ></u--input>
				</view>
				<view class="userNameView" style="margin-top: 20px;">
					<u--input
					    placeholder="请输入密码"
					    border="surround"
					    v-model="user.password"
						type="password"
					    @change="change"
					  ></u--input>
				</view>
			</view>
			<!-- <view class="forgetView">
				<view>忘记密码</view>
				<view>点击注册</view>
			</view> -->
			<!-- <view class="loginBtn" @click="submitHandle">登录</view> -->
			<view style="display: flex;flex-direction: column;margin-top: 80px;" v-if="state=='1'">
				<button v-show="protocolState=='1'" @getphonenumber="ongetPhoneNumber2" class="loginBtn" style="border: transparent;" lang="zh_CN" open-type='getPhoneNumber' plain>手机号快捷登录</button>
				<button v-show="protocolState=='0'" @click="wechatAuthHandle" class="loginBtn" style="border: transparent;" lang="zh_CN" plain>手机号快捷登录</button>
				<view class="tip" @click="state='2'">
					<text class="tipMsg">
						切换其他手机号登录
					</text>
				</view>
			</view>
			<view style="display: flex;flex-direction: column;margin-top: 8px;" v-if="state=='2'">
				<view style="display: flex;flex-direction: row;color: #999EA5;align-items: center;justify-content: space-between;">
					<view @click="registerHandle">注册</view>
					<view style="margin-top: 5px;color: #999EA5;" @click="forgetPwdHandle">忘记密码</view>
				</view>
				<view class="loginBtn" @click="submitHandle">登录</view>
				<!-- <view class="tip" @click="state='1'" v-if="isWxLogin!='2'">
					<text class="tipMsg">
						切换手机号快捷登录
					</text>
				</view> -->
			</view>
		</view>
		<!-- <view class="bottomView">
			<checkbox-group>
				<label style="font-size: 12px;">
					<checkbox value="cb" :checked="checked" color="#247BFD" style="transform:scale(0.7)" />
					我已阅读<label style="color: #247BFD;" @click="agreementHandle">《用户协议》</label>
					和
					<label style="color: #247BFD;" @click="privacyPolicyHandle">《隐私协议》</label>
				</label>
			</checkbox-group>
		</view> -->
		<view class="bottomView">
			<view style="display: flex;flex-direction: row;align-items: center;height: 30px;">
				<view style="display: flex;flex-direction: row;" @click="agreeProtocolHandle">
					<image :src="protocolState=='0'?'../../static/img/login_ic_select_nor.png':'../../static/img/login_ic_select_sel.png'" style="width: 20px;height: 20px;margin-right: 5px;"></image>我已阅读
				</view>
				
				<label style="color: #247BFD;" @click="agreementHandle">《用户协议》</label>
				和
				<label style="color: #247BFD;" @click="privacyPolicyHandle">《隐私协议》</label>
			</view>
		</view>
		
		<view>
			<u-popup :show="show" mode="center" @close="close" @open="open" :round="15">
				<view class="popupBgView">
					<view class="popupContent">
						<view style="margin-top: 20px;display: flex;justify-content: center;font-size: 15px;font-weight: 700;color: black;">用户协议和隐私政策</view>
						<view style="line-height: 1.8;margin-top: 20px;font-size: 14px;">
							我们依据最新法律法规要求，在使用该小程序前，请先点击并仔细阅读
							<text style="font-weight: bold;color: black;" @click="agreementHandle">《用户协议》</text>和
							<text style="font-weight: bold;color: black;" @click="privacyPolicyHandle">《隐私政策》</text>
							<view>如你同意以上全部内容，请点击“<text style="font-weight: bold;color: black;">同意并登录</text>”按钮即可开始使用。</view>
						</view>
					</view>
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
						<button v-if="state=='1'" @getphonenumber="ongetPhoneNumber1" class="popupAgreeBtn" style="border: transparent;" lang="zh_CN" open-type='getPhoneNumber' plain>同意并登录</button>
						<button v-else class="popupAgreeBtn" style="border: transparent;" lang="zh_CN" plain @click="loginBtnHandle">同意并登录</button>
						<view class="popupAgreeBtn" style="margin-top: 10px;background-color: transparent;color: #999EA5;" @click="show=false">
							不同意
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { CheckPhoneState, ProtocolType, isJZNull } from '../../utils/auth'
import { checkPhone, getPhoneNumberRequest, login } from '@/api/login'
import { encrypt } from '@/utils/rsaEncrypt'
import navBar from "@/components/nav_bar.vue"
	export default{
		components:{
			navBar
		},
		data(){
			return {
				checked:false,
				StatusBar: 0,
				show:false,
				protocolState:'0',
				CustomBar: 0,//this.$statusBarHeight
				TopHeight:0,
				state:'2',
				isWxLogin:'',
				user:{
					username:'',
					password:''
				}
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.TopHeight = this.CustomBar+36;//this.StatusBar+this.CustomBar;
			}})
		},
		onShow() {
			const currentUserName = uni.getStorageSync('currentUserName')
			const currentPwd = uni.getStorageSync('currentPwd')
			this.user.username = currentUserName
			this.user.password = currentPwd
			const protocolState = uni.getStorageSync('protocolState')
			if (!isJZNull(protocolState)) {
				this.protocolState = protocolState
			}
			
			const isWxLogin = uni.getStorageSync("isWxLogin")
			if(isWxLogin){
				this.state = '2';
				this.isWxLogin = isWxLogin;
			}
		},
		methods:{
			forgetPwdHandle(){
				uni.navigateTo({
					url: '/pageageMine/pages/changePw?status=1'
				})
			},
			backHandle(){
				uni.navigateBack({
					delta:1
				})
			},
			homeHandle(){
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			change(e){
				
			},
			agreeProtocolHandle(){
				this.protocolState = this.protocolState=='0'?'1':'0'
				uni.setStorageSync("protocolState",this.protocolState)
			},
			agreementHandle(){
				uni.navigateTo({
					url: `/packageHome/pages/protocol/index?protocolType=${ProtocolType.USER_AGREEMENT}`
				})
			},
			ongetPhoneNumber1(e){
				console.log(e)
				if (e.detail.errMsg != "getPhoneNumber:ok") {
					uni.showToast({
						icon:'none',
						title: '请允许获取手机号，否则功能不可用'
					})
					return
				}
				this.protocolState = '1'
				this.show = false
				uni.setStorageSync("protocolState",this.protocolState)
				this.getPhoneNumberRequestHandle(e.detail.code)
			},
			ongetPhoneNumber2(e){
				console.log(e)
				
				if (e.detail.errMsg != "getPhoneNumber:ok") {
					uni.showToast({
						icon:'none',
						title: '请允许获取手机号，否则功能不可用'
					})
					return
				}
				this.getPhoneNumberRequestHandle(e.detail.code)
			},
			getPhoneNumberRequestHandle(phoneCode){
				getPhoneNumberRequest({code:phoneCode}).then(res =>{
					console.log(res.phone_info.purePhoneNumber)
					if (res.errcode == '0') {
						uni.setStorageSync("isWxLogin",'2')
						this.checkPhoneRequest(res.phone_info.purePhoneNumber)
					}
				})
			},
			checkPhoneRequest(currentPhone){
				uni.login({
				  provider: 'weixin',
				  success: res => {
					if (res.code) {
					  // 获取到登录凭证code
					  let code = res.code;
					  // 调用后端接口，传递code进行获取openid操作
					  checkPhone({phone:currentPhone,userCode:code}).then(res =>{
					  	switch (res.state){//状态 1-不存在 2-已存在未注册 3-已注册
					  		case CheckPhoneState.THREE:
					  			uni.setStorageSync("uni_session",res.loginSuccessVo.token)
					  			uni.setStorageSync("userInfo",JSON.stringify(res.loginSuccessVo.user))
					  			uni.hideLoading()
					  			uni.switchTab({
					  				url: '/pages/home/home'
					  			})
					  			break;
					  		case CheckPhoneState.ONE: // 在发送短信的时候校验
					  			uni.navigateTo({
					  				url: '/pages/login/register?phone='+currentPhone+'&state='+res.state
					  			})
					  			break
					  		case CheckPhoneState.TWO:// 客服提供的手机号和当前手机号同一个
					  			uni.navigateTo({
					  				url: '/pages/login/register?phone='+currentPhone+'&state='+res.state
					  			})
					  			break
					  		default:
					  			break;
					  	}
					  })
					}else{
						uni.hideLoading()
					}
					console.log(res)
				  },
				  fail(e) {
					console.log(e)
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title: e
					})
				  }
				});
				
			},
			registerHandle(){
				uni.navigateTo({
					url: '/pages/login/register?phone='+'&state='+'2'
				})
			},
			wechatAuthHandle(){
				if (this.protocolState=='0') {
					this.show = true
					return
				}
			},
			privacyPolicyHandle(){
				uni.navigateTo({
					url: `/packageHome/pages/protocol/index?protocolType=${ProtocolType.PRIVACY_POLICY}`
				})
			},
			loginBtnHandle(){
				this.protocolState ='1'
				this.show = false
				uni.setStorageSync("protocolState",this.protocolState)
				this.submitHandle()
			},
			submitHandle(){
				// if (!this.checked) {
				// 	uni.showModal({
				// 		title:"请先勾选协议"
				// 	})
				// 	return
				// }
				if (isJZNull(this.user.username)) {
					uni.showToast({
						icon:'none',
						title:'用户名称不能为空'
					})
					return
				}
				if (isJZNull(this.user.password)) {
					uni.showToast({
						icon:'none',
						title:'密码不能为空'
					})
					return
				}
				if (this.protocolState=='0') {
					this.show = true
					return
				}
				let password2 = encrypt(this.user.password)
				uni.showLoading({
					title: '登录中'
				})
				uni.login({
				  provider: 'weixin',
				  success: res => {
					if (res.code) {
					  // 获取到登录凭证code
					  let code = res.code;
					  // 调用后端接口，传递code进行获取openid操作
					  login({username:this.user.username,password:password2,userCode:code}).then(res =>{
					  	uni.setStorageSync("uni_session",res.token)
					  	uni.setStorageSync("currentUserName",this.user.username)
					  	uni.setStorageSync("currentPwd",this.user.password)
					  	// localStorage.setItem("uni_session",res.token)
					  	uni.setStorageSync("userInfo",JSON.stringify(res.user))
					  	uni.hideLoading()
					  	uni.switchTab({
					  		url: '/pages/home/home'
					  	})
					  }).catch(error =>{
					  	uni.hideLoading()
					  	uni.showModal({
					  		title:error
					  	})
					  })
					}else{
						uni.hideLoading()
					}
					console.log(res)
				  },
				  fail(e) {
					console.log(e)
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title: e
					})
				  }
				});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.barView{
		position: fixed;
	}
	.sonView{
		position: fixed;
		left: 0px;
		width: 81px;
		height: 30px;
		border: 0.5px solid #E9E9E9;
		border-radius: 16px;
		margin-left: 16px;
		display: flex;
		flex-direction: row;
		background-color: white;
	}
	.bgView{
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		// justify-content: center;
		flex-direction: column;
		overflow-y: auto;
	}
	.topView{
		width: 100vw;
		display: flex;
		flex: 1;
		align-items: center;
		flex-direction: column;
	}
	.bottomView{
		// background-color: red;
		width: 100vw;
		height: 80px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.logoView{
		background: linear-gradient(to bottom, #7ABCFE, #FFFFFF);
		width: 100vw;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: linear-gradient( 180deg, #D5E9FE 0%, #FFFFFF 100%);
		// height: 300px;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.logo{
		width: 163px;
		height: 76px;
		display: flex;
		justify-content: center;
	}
	.userNameView{
		// background-color: orange;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100vw - 48px);
		height: 48px;
		border-bottom: 1rpx solid rgba(0,0,0,0.08);
	}
	.forgetView{
		display: flex;
		flex-direction: row;
		width: 100vw;
		justify-content: space-between;
		color: #686868;
		width: calc(100vw - 48px);
		// margin-left: 24px;
		margin-top: 21px;
		font-size: 14px;
	}
	.loginBtn{
		width: calc(100vw - 48px);
		height: 48px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: white;
		border-radius: 24px;
		margin-top: 24px;
	}
	.tip{
		// background-color: red;
		width: calc(100vw - 48px);
		display: flex;
		align-items: center;
		justify-content: center;
		// background-color: red;
		margin-top: 5px;
	}
	.tipMsg{
		color: #999EA5;
		font-size: 14px;
		padding-left: 18px;
		padding-right: 18px;
		padding: 5px;
		margin-top: 10px;
	}
	.popupBgView{
		height: 600rpx;
		width: 530rpx;
		display: flex;
		flex-direction: column;
		padding-left: 20px;
		padding-right: 20px;
		color: #7E7E7E;
		align-items: center;
	}
	.popupContent{
		flex: 1;
		width: 500rpx;
		// background-color: red;
	}
	.popupAgreeBtn{
		width: 50%;
		height: 40px;
		background-color: #247BFD;
		border-radius: 20px;
		font-size:14px;
		color:white;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>